<template>
  <div>
    <van-nav-bar title="影院" ref="navbar" @click-left="handleLeft" @click-right="handleRight">
      <template #left>
        {{ cityName }}
        <van-icon name="arrow-down" size="18" color="black" />
      </template>

      <template #right>
        <van-icon name="search" size="24" color="black" />
      </template>
    </van-nav-bar>

    <div class="box1" :style="{height:height}">
      <ul>
        <li v-for="data in cinemaList" :key="data.cinemaId">
          <div class="left">
            <div class="cinema_name">{{ data.name }}</div>
            <div class="cinema_text">{{ data.address }}</div>
          </div>

          <div class="right cinema_name">
            <div style="color:red;">￥{{ data.lowPrice/100 }}起</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import http from '@/util/http'
import BetterScroll from 'better-scroll'
import { mapState, mapActions, mapMutations } from 'vuex'

export default {
  data () {
    return {
      // cinemaList: [],
      height: '0px'
    }
  },

  computed: {
    ...mapState(['cinemaList', 'cityId', 'cityName'])
  },

  mounted () {
    // console.log(this.$refs.navbar.$el.offsetHeight)
    // 动态计算高度
    this.height = document.documentElement.clientHeight - this.$refs.navbar.$el.offsetHeight - document.querySelector('footer').offsetHeight + 'px'

    // 用this.$store.dispatch将一个函数名和相应的参数会给store里的actions属性里
    // if (this.$store.state.cinemaList.length === 0) {  // 如果没有数据就发起请求
    //   this.$store.dispatch('getCinemaData', this.cityId).then(res => {
    if (this.cinemaList.length === 0) { // 如果没有数据就发起请求,新写法
      this.getCinemaData(this.cityId).then(res => { // 新写法
        this.$nextTick(() => {
          new BetterScroll('.box1', {
            scrollbar: {
              fade: true
            }
          })
        })
      })
    // 虽然有数据，但是数据里的cityId与this.$store.state.cityId不同，也要发起请求。
    // 还有一种方法，就是在触发@click-left="handleLeft"这个事件时将this.$store.state.cinemaList清空
    // 但是清空this.$store.state.cinemaList时，仍然需要this.$store.commit这个方法，
    // 而且有时候触发@click-left="handleLeft"这个事件并不一定更换地址名称，
    // 如果不更换地址名称那么缓存数据就是仍然有用的，所以这个方法更有利于利用缓存
    } else if (this.cinemaList[0].cityId !== this.cityId) {
      this.getCinemaData(this.cityId).then(res => {
        this.$nextTick(() => {
          new BetterScroll('.box1', {
            scrollbar: {
              fade: true
            }
          })
        })
      })
    } else {
      // console.log('缓存')
      this.$nextTick(() => {
        new BetterScroll('.box1', {
          scrollbar: {
            fade: true
          }
        })
      })
    }

    // http({
    //   url: `/gateway?cityId=${this.$store.state.cityId}&ticketFlag=1&k=1592507`,
    //   headers: {
    //     'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"172914982913636894826954753"}',
    //     'X-Host': 'mall.film-ticket.cinema.list'
    //   }
    // }).then (res => {
    //   // console.log(res.data.data.cinemas)
    //   this.cinemaList = res.data.data.cinemas
    // this.cinemaList = this.$store.state.cinemaList

    // this.$nextTick(() => {
    //   new BetterScroll('.box1', {
    //     scrollbar: {
    //       fade: true
    //     }
    //   })
    // })
    // })
  },

  methods: {
    ...mapActions(['getCinemaData']),
    ...mapMutations(['clearCinema']),
    handleLeft () {
      // console.log('handleLeft')
      this.$router.push('/city')
      // this.$store.commit('clearCinema')
      // this.clearCinema()  // 新写法
    },

    handleRight () {
      this.$router.push('/cinemas/search')
    }
  }
}
</script>

<style lang="scss" scoped>
li {
  padding: 15px;

  display: flex;
  justify-content: space-between;
  .left {
    width: 212px;
  }

  .cinema_name {
    font-size: 15px;
  }

  .cinema_text {
    color: #797d82;
    font-size: 12px;
    margin-top: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.box1 {
  overflow: hidden;
  position: relative;
}
</style>
